<template>
	<view class="menu-overlay" @click="emit('close')">
		<view class="menu-content" @click.stop>
			<view class="menu-header">Account Management</view>
			<view class="menu-section">
				<view class="menu-section-title">Settings</view>
				<view class="menu-item" @click="onSelect('company')">
					<image src="/static/menu/info.png" class="menu-icon" />
					<text>Company Info</text>
				</view>
				<view class="menu-item" @click="onSelect('subscription')">
					<image src="/static/menu/subscription.png" class="menu-icon" />
					<text>Subscription</text>
				</view>
				<view class="menu-item" @click="onSelect('settings')">
					<image src="/static/menu/settings.png" class="menu-icon" />
					<text>Settings</text>
				</view>
				<view class="menu-item" @click="onSelect('language')">
					<image src="/static/menu/language.png" class="menu-icon" />
					<text>Language</text>
				</view>
			</view>
			<view class="divider"></view>
			<view class="menu-section">
				<view class="menu-section-title">Community</view>
				<view class="menu-item" @click="onSelect('recommend')">
					<image src="/static/menu/recommend.png" class="menu-icon" />
					<text>Recommend a brand</text>
				</view>
				<view class="menu-item" @click="onSelect('partner')">
					<image src="/static/menu/partner.png" class="menu-icon" />
					<text>Invite a partner</text>
				</view>
			</view>
			<view class="divider"></view>
			<view class="menu-section">
				<view class="menu-section-title">Community</view>
				<view class="menu-item" @click="onSelect('support')">
					<image src="/static/mail.png" class="menu-icon" />
					<text>Contact support</text>
				</view>
				<view class="menu-item" @click="onSelect('faq')">
					<image src="/static/menu/FAQ.png" class="menu-icon" />
					<text>How Climata works (FAQ)</text>
				</view>
				<view class="menu-item" @click="onSelect('legal')">
					<image src="/static/menu/legal.png" class="menu-icon" />
					<text>Legal & Privacy</text>
				</view>
				<view class="menu-item" @click="onSelect('logout')">
					<image src="/static/menu/Logout.png" class="menu-icon" />
					<text>Logout</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { useUserStore } from '@/store/user.js'

const props = defineProps({
    anchorTop: { type: Number, default: 64 },
    anchorRight: { type: Number, default: 0 }
});
const emit = defineEmits(['close', 'select']);

const userStore = useUserStore();

const onSelect = (key) => {
    if (key === 'company') {
        uni.navigateTo({ url: '/pages/factory/factory' });
    } else if (key === 'logout') {
        // 清理用户状态
        userStore.setUserType('');
        // 清理本地存储
        uni.clearStorageSync();
        // 跳转到登录页面
        uni.reLaunch({ url: '/pages/login/login' });
        return;
    }
    emit('select', key);
};
</script>

<style>
.menu-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.0);
	z-index: 1000;
}

.menu-content {
    position: fixed;
    /* 使用传入锚点，避免 px 与 rpx 混用造成偏移 */
    top: calc(var(--anchor-top, var(--menu-anchor-top, 70px)) - var(--menu-offset-y, 8px));
    right: var(--anchor-right, 0px);
    background-color: #ffffff;
    border-radius: 16rpx 0 0 16rpx;
    box-shadow: 0 16rpx 40rpx rgba(0, 0, 0, 0.15);
    min-width: 260px;
    overflow: hidden;
}

/* 通过行内style注入锚点变量（无额外规则，保留选择器可移除） */

.menu-header {
	padding: 28rpx 32rpx;
	font-size: 32rpx;
	font-weight: 600;
	border-bottom: 2rpx solid #eee;
}

.menu-section { padding: 16rpx 0; }
.menu-section-title {
	padding: 16rpx 32rpx;
	font-size: 24rpx;
	color: #666;
	text-transform: uppercase;
}
.menu-item {
	padding: 24rpx 32rpx;
	display: flex;
	align-items: center;
	gap: 20rpx;
	font-size: 28rpx;
	color: #333;
}
.menu-item:active { background-color: #f5f5f5; }
.menu-icon { width: 36rpx; height: 36rpx; }
.divider { height: 2rpx; background-color: #eee; }

	/* PC宽屏时右侧抽屉宽度与容器对齐，不超出移动视觉 */
	@media (min-width: 768px) {
		/* 覆盖层限制为与容器相同宽度并水平居中 */
		.menu-overlay { left: 50%; right: auto; transform: translateX(-50%); width: 100%; max-width: 420px; }
		/* 在覆盖层内部绝对定位，贴齐容器右侧 */
		.menu-content { position: absolute; top: calc(var(--anchor-top, var(--menu-anchor-top, 70px)) - var(--menu-offset-y, 8px)); right: var(--anchor-right, 0px); left: auto; transform: none; max-width: 420px; }
	}
</style>

